// ** Third Party Components
import { Calendar } from 'react-feather'
import Flatpickr from 'react-flatpickr'
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts'

// ** Reactstrap Imports
import { Card, CardHeader, CardTitle, CardBody } from 'reactstrap'

// ** Chart Data
const data = [
  {
    name: '7/12',
    申请: 80,
    公告通知: 130,
    报警: 150,
  },
  {
    name: '8/12',
    申请: 100,
    公告通知: 150,
    报警: 170,
  },
  {
    name: '9/12',
    申请: 80,
    公告通知: 140,
    报警: 160,
  },
  {
    name: '10/12',
    申请: 100,
    公告通知: 150,
    报警: 170,
  },
  {
    name: '11/12',
    申请: 50,
    公告通知: 90,
    报警: 110,
  },
  {
    name: '12/12',
    申请: 125,
    公告通知: 90,
    报警: 100,
  },
  {
    name: '13/12',
    申请: 70,
    公告通知: 110,
    报警: 130,
  },
  {
    name: '14/12',
    申请: 100,
    公告通知: 150,
    报警: 170,
  },
  {
    name: '15/12',
    申请: 80,
    公告通知: 100,
    报警: 120,
  },
  {
    name: '16/12',
    申请: 30,
    公告通知: 60,
    报警: 70,
  },
]

const CustomTooltip = (data) => {
  if (data.active && data.payload) {
    return (
      <div className="recharts-custom-tooltip">
        <p className="fw-bold mb-0">{data.label}</p>
        <hr />
        <div className="active">
          {data.payload.map((i) => {
            return (
              <div className="d-flex align-items-center" key={i.dataKey}>
                <span
                  className="bullet bullet-sm bullet-bordered me-50"
                  style={{
                    backgroundColor: i.fill,
                  }}
                ></span>
                <span className="text-capitalize me-75">
                  {i.dataKey} : {i.payload[i.dataKey]}
                </span>
              </div>
            )
          })}
        </div>
      </div>
    )
  }

  return null
}

const SimpleBarChart = () => {
  return (
    <Card>
      <CardHeader className="flex-sm-row flex-column justify-content-sm-between justify-content-center align-items-sm-center align-items-start">
        <CardTitle tag="h4">事务处理统计</CardTitle>
        <div className="d-flex align-items-center">
          <Calendar size={15} />
          <Flatpickr
            className="form-control flat-picker bg-transparent border-0 shadow-none"
            options={{
              mode: 'range',
              // eslint-disable-next-line no-mixed-operators
              defaultDate: [
                new Date(),
                new Date(new Date().getTime() + 5 * 24 * 60 * 60 * 1000),
              ],
            }}
          />
        </div>
      </CardHeader>

      <CardBody>
        <div className="d-flex align-items-center flex-wrap mb-2">
          <div className="me-1">
            <span
              className="bullet bullet-sm bullet-bordered me-50"
              style={{ backgroundColor: '#826af9' }}
            ></span>
            <span className="align-middle me-75">申请</span>
          </div>
          <div className="me-1">
            <span
              className="bullet bullet-sm bullet-bordered me-50"
              style={{ backgroundColor: '#9f87ff' }}
            ></span>
            <span className="align-middle me-75">公告通知</span>
          </div>
          <div className="me-1">
            <span
              className="bullet bullet-sm bullet-bordered me-50"
              style={{ backgroundColor: '#d2b0ff' }}
            ></span>
            <span className="align-middle me-75">报警</span>
          </div>
        </div>
        <div className="recharts-wrapper bar-chart">
          <ResponsiveContainer>
            <BarChart height={300} data={data} barSize={15}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip content={CustomTooltip} />
              <Bar dataKey="申请" stackId="a" fill="#826af9" />
              <Bar dataKey="公告通知" stackId="a" fill="#9f87ff" />
              <Bar
                dataKey="报警"
                stackId="a"
                fill="#d2b0ff"
                radius={[15, 15, 0, 0]}
              />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </CardBody>
    </Card>
  )
}
export default SimpleBarChart
